<template>
    <div>
        <Form ref="form" :model="form" :label-width="90" label-position="left" v-if="userShow">
            <FormItem label="用户名：" prop="username">{{ form.username }}</FormItem>
            <!--      <FormItem label="用户头像：">-->
            <!--        <upload-pic-thumb-->
            <!--            v-model="form.avatar"-->
            <!--            :multiple="false"-->
            <!--        ></upload-pic-thumb>-->
            <!--      </FormItem>-->
            <FormItem label="姓名：">
                <span>{{ form.nickname }}</span>
            </FormItem>
            <!--      <FormItem label="姓名：" prop="nickname" :error="error">-->
            <!--        <Input v-model="form.nickname" style="width: 300px" readonly/>-->
            <!--      </FormItem>-->
            <!--      <FormItem label="性别：">-->
            <!--        <dict dict="sex" v-model="form.sex" style="width: 300px" />-->
            <!--      </FormItem>-->
            <!--      <FormItem label="生日：">-->
            <!--        <DatePicker-->
            <!--            v-model="form.birth"-->
            <!--            @on-change="changeBirth"-->
            <!--            style="width: 300px"-->
            <!--            type="date"-->
            <!--        ></DatePicker>-->
            <!--      </FormItem>-->
            <!--      <FormItem label="所在省市：">-->
            <!--        <al-cascader-->
            <!--            v-model="form.address"-->
            <!--            data-type="name"-->
            <!--            level="2"-->
            <!--            style="width: 300px"-->
            <!--        />-->
            <!--      </FormItem>-->
            <!--      <FormItem label="街道地址：" prop="street">-->
            <!--        <Input v-model="form.street" style="width: 300px" />-->
            <!--      </FormItem>-->
            <!--      <FormItem label="个人简介：" prop="description">-->
            <!--        <Input-->
            <!--            v-model="form.description"-->
            <!--            type="textarea"-->
            <!--            style="width: 300px"-->
            <!--            :autosize="{ minRows: 3, maxRows: 5 }"-->
            <!--            placeholder="个人简介"-->
            <!--        ></Input>-->
            <!--      </FormItem>-->
            <!--      <FormItem label="所属部门：">-->
            <!--        <span>{{ form.departmentTitle }}</span>-->
            <!--      </FormItem>-->
            <!--      <FormItem label="用户类型：">-->
            <!--        <span>{{ form.typeTxt }}</span>-->
            <!--      </FormItem>-->
            <!--      <FormItem>-->
            <!--        <Button-->
            <!--            type="primary"-->
            <!--            style="width: 100px; margin-right: 5px"-->
            <!--            :loading="loading"-->
            <!--            @click="saveEdit"-->
            <!--        >保存</Button-->
            <!--        >-->
            <!--      </FormItem>-->
        </Form>

        <Form ref="bysForm" :model="bysForm" :rules="bysFormRules" :label-width="100" label-position="left" v-has-role="'ROLE_USER'">
            <FormItem label="用户名：" prop="username">{{ form.username }}</FormItem>
            <FormItem label="姓名：">
                <span>{{ form.nickname }}</span>
            </FormItem>
            <FormItem label="出生时间：" prop="cssj" :error="error">
                <DatePicker v-model="bysForm.cssj" type="date" format="yyyy-MM-dd" clearable placeholder="选择出生时间" style="width: 24.5%" @on-change="datapick"></DatePicker>
            </FormItem>
            <FormItem label="手机号码：" prop="mobile" :error="error">
                <Input v-model="bysForm.mobile" style="width: 300px" disabled />
            </FormItem>
            <FormItem label="电子邮箱：" prop="email" :error="error">
                <Input v-model="bysForm.email" style="width: 300px" />
            </FormItem>
            <FormItem label="QQ号码：" prop="qq" :error="error">
                <Input v-model="bysForm.qq" style="width: 300px" />
            </FormItem>
            <FormItem label="所在地区：" prop="szdq" :error="error">
                <Select style="width: 300px" v-model="bysForm.szdq" filterable clearable>
                    <Option v-for="item in areaCodeList" :value="item.code">{{ item.displayName }}</Option>
                </Select>
            </FormItem>
            <FormItem label="家庭地址：" prop="jtdz" :error="error">
                <Input v-model="bysForm.jtdz" style="width: 300px" />
            </FormItem>
            <FormItem label="家庭电话：" prop="jtdh" :error="error">
                <Input v-model="bysForm.jtdh" style="width: 300px" />
            </FormItem>
            <FormItem label="家庭邮编：" prop="jtyb" :error="error">
                <Input v-model="bysForm.jtyb" style="width: 300px" />
            </FormItem>
            <FormItem>
                <Button type="primary" style="width: 100px; margin-right: 5px" :loading="loading" @click="saveBysEdit">保存</Button>
            </FormItem>
        </Form>
    </div>
</template>

<script>
import { userInfo, userInfoEdit } from '@/api/index';
import uploadPicThumb from '@/views/my-components/xboot/upload-pic-thumb';
import Cookies from 'js-cookie';
import dict from '@/views/my-components/xboot/dict';
import { validateMobile, qqMobile } from '@/libs/validate';
import { getStore } from '../../libs/storage';

export default {
    components: {
        uploadPicThumb,
        dict
    },
    name: 'user',
    data() {
        return {
            areaCodeList: [], //地区代码表
            loading: false,
            form: {
                address: []
            },
            error: '',
            // 毕业生基本信息表单
            bysForm: {
                cssj: '',
                mobile: '',
                email: '',
                qq: '',
                szdq: '',
                jtdz: '',
                jtdh: '',
                jtyb: ''
            },
            // 毕业生表单校验规则
            bysFormRules: {
                cssj: [{ required: true, message: '出生时间不能为空', trigger: 'blur' }],
                email: [
                    { required: true, message: '邮箱不能为空', trigger: 'blur' },
                    { type: 'email', message: '邮箱格式不正确' }
                ],
                mobile: [
                    {
                        required: true,
                        message: '手机号不能为空',
                        trigger: 'change'
                    },
                    {
                        validator: validateMobile,
                        trigger: 'change'
                    }
                ],
                qq: [
                    { required: true, message: 'QQ号不能为空', trigger: 'blur' },
                    { validator: qqMobile, trigger: 'change' }
                ],
                jtdz: [{ required: true, message: '家庭地址不能为空', trigger: 'blur' }],
                szdq: [{ required: true, message: '所在地区不能为空', trigger: 'blur' }],
                jtdh: [{ required: true, message: '家庭电话不能为空', trigger: 'blur' }],
                jtyb: [{ required: true, message: '家庭邮编不能为空', trigger: 'blur' }]
            }
        };
    },
    computed: {
        userShow() {
            let roles = getStore('roles');
            console.log(roles, 'roles');
            console.log(roles && roles.includes('ROLE_USER'), 'roles&&roles.includes("ROLE_USER")');

            if (!(roles && roles.includes('ROLE_USER'))) {
                return true;
            }
            return false;
        }
    },
    methods: {
        init() {
            let v = JSON.parse(Cookies.get('userInfo'));
            // 转换null为""
            for (let attr in v) {
                if (v[attr] == null) {
                    v[attr] = '';
                }
            }
            let str = JSON.stringify(v);
            let userInfo = JSON.parse(str);
            this.form = userInfo;
            if (userInfo.address) {
                if (typeof userInfo.address == 'string') {
                    this.form.address = userInfo.address.split(',');
                } else {
                    this.form.address = userInfo.address;
                }
            } else {
                this.form.address = [];
            }
            if (this.form.type == 0) {
                this.form.typeTxt = '普通用户';
            } else if (this.form.type == 1) {
                this.form.typeTxt = '管理员';
            }
            // 获取毕业生个人信息(根据userId)
            // this.getBysInfo()
            this.getDictData();
        },
        getBysInfo() {
            // 根据用户id获取毕业生个人信息
            this.postRequest('/bysPersonInfo/getInfoByUserId', { userId: this.form.id }).then(res => {
                if (res.success) {
                    this.bysForm = res.result;
                }
            });
        },
        datapick(e) {
            //毕业生出生时间日期选择器赋值
            this.bysForm.cssj = e;
        },
        saveBysEdit() {
            // 毕业生保存修改的信息
            if (typeof this.bysForm.cssj == 'object') {
                //处理出生日期，日期格式
                this.bysForm.cssj = this.format(this.bysForm.cssj, 'yyyy-MM-dd');
            }
            this.loading = true;
            this.postRequest('/bysPersonInfo/insertOrUpdate', this.bysForm).then(res => {
                this.loading = false;
                if (res.success) {
                    this.$Message.success('操作成功');
                    this.$emit('on-submit', true);
                }
            });
        },
        changeBirth(v) {
            this.form.birth = v;
        },
        saveEdit() {
            if (!this.form.nickname) {
                this.error = '请输入用户名';
                return;
            } else {
                this.error = '';
            }
            this.loading = true;
            if (typeof this.form.birth == 'object') {
                this.form.birth = this.format(this.form.birth, 'yyyy-MM-dd');
            }
            delete this.form.roles;
            userInfoEdit(this.form).then(res => {
                this.loading = false;
                if (res.success) {
                    this.$Message.success('保存成功');
                    // 更新头像
                    this.$store.commit('setNickname', this.form.nickname);
                    this.$store.commit('setAvatar', this.form.avatar);
                    // 需要更新用户信息
                    this.$emit('on-success', true);
                }
            });
        },
        getDictData() {
            // 单位所在地->取自数据库地区代码
            this.postRequest('/areaCode/getAll').then(res => {
                if (res.success) {
                    this.areaCodeList = res.result;
                }
            });
        }
    },
    mounted() {
        this.init();
    }
};
</script>
